<template>
    <!-- style="z-index: 0;" -->
    <div class="fullscreen screen-bg-style" element-loading-background="rgba(0, 0, 0, 0.2)" v-loading="loaded">
        <div class="flex column full-width full-height q-pa-sm q-px-md">
            <!-- <div class="screen-header full-width">
                <div class="screen-title gradient-title">数据大屏</div>
            </div> -->

            <div class="grid-container full-width full-height">
                <div class="left-column">
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md left-item" :noData="loaded && OrderQuantity.length == 0">
                            <span slot="title" class="gradient-title">近七天订单曲线图(美国时区)</span>
                            <OrderNumWithTime :chartData="orderQuantity" slot="default"></OrderNumWithTime>
                        </BoxCard>
                    </div>
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md left-item" :noData="loaded && daysSalesFigures.length == 0">
                            <!-- <span slot="title" class="gradient-title">店铺销量统计</span>
                            <OperationalPerformanceStatistics :chartData="daysSalesFigures" slot="default"></OperationalPerformanceStatistics> -->
                            <span slot="title" class="gradient-title">店铺销售额统计</span>
                            <SaleByTodayYesterday :chartData="daysSalesFigures" slot="default"></SaleByTodayYesterday>
                        </BoxCard>
                    </div>
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md left-item" :noData="loaded && AdvertisingRanking.length == 0">
                            <div slot="title" class="gradient-title full-width flex justify-between items-center">
                                <span slot="title" class="gradient-title">今日支付工具明细</span>
                                <el-button type="text" @click="OrderPaymentTools" slot="right">更多<i class="el-icon-d-arrow-right"></i></el-button>
                            </div>
                            
                            <AdvertisingRankingAnalysis :tableData="operationalPerformance"></AdvertisingRankingAnalysis>
                        </BoxCard>
                    </div>
                </div>
                <div class="right-column">
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md" style="background: rgb(73, 50, 228)">
                            <DataScreen :params="dataStatistics" slot="default"></DataScreen>
                        </BoxCard>
                    </div>
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md">
                            <div slot="title" class="gradient-title full-width flex justify-between items-center">
                                <span>店铺销量排行榜</span>
                                <el-button type="text" @click="gotoDailySpuPage" slot="right">更多<i class="el-icon-d-arrow-right"></i></el-button>
                            </div>
                            <!-- <StoreSalesRanking :chartData="storeSalesRanking" slot="default"></StoreSalesRanking> -->
                            <SupRanking :tableData="spuRanking"></SupRanking>
                        </BoxCard>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BoxCard from './components/BoxCard'
import OrderNumWithTime from './components/OrderNumWithTime'
import OperationalPerformanceStatistics from './components/OperationalPerformanceStatistics'
import AdvertisingRankingAnalysis from './components/AdvertisingRankingAnalysis'
import DataScreen from './components/DataScreen'
import StoreSalesRanking from './components/StoreSalesRanking'
import SupRanking from './components/SupRanking'
import SaleByTodayYesterday from './components/SaleByTodayYesterday'
import { queryOrderReportDataScreen } from '@/api/orderReportDataScreen'

export default {
    name: 'data-screen',
    components: {
        BoxCard,
        OrderNumWithTime,
        OperationalPerformanceStatistics,
        AdvertisingRankingAnalysis,
        DataScreen,
        StoreSalesRanking,
        SupRanking,
        SaleByTodayYesterday
    },
    data() {
        return {
            loaded: true,
            orderQuantity: [], // 订单数量增长曲线
            operationalPerformance: [], // 运营业绩
            daysSalesFigures: [], // 店铺销售额
            advertisingRanking: [], // 广告排名
            storeSalesRanking: [], // 店铺销量排行
            spuRanking: [],
            dataStatistics: {
                // 数据统计
                DataStatisticsNew: {
                    quantity: undefined,
                    total_price: undefined,
                    skuquantity: undefined,
                    advertising_spend: undefined,
                    roi: undefined,
                    profit: undefined,
                }, // 数据统计—最新
                DataStatisticsLast: {
                    quantity: undefined,
                    total_price: undefined,
                    skuquantity: undefined,
                    advertising_spend: undefined,
                    roi: undefined,
                    profit: undefined,
                }, // 数据统计—昨日对比
            },
        }
    },
    mounted() {
        this.getData()
        setInterval(() => {
            this.getData('refresh')
        }, 3000)
    },
    methods: {
        gotoDailySpuPage() {
            this.$router.push({
                path: '/report/sku'
            })
        },
        OrderPaymentTools() {
            this.$router.push({
                path: '/report/payment'
            })
        },
        getData(type) {
            if (type !== 'refresh') {
                this.loaded = true
            }
            queryOrderReportDataScreen()
                .then(res => {
                    this.orderQuantity = res.data?.OrderQuantity ?? []
                    this.operationalPerformance =
                        res.data?.OperationalPerformance?.map(item => {
                            item.total_price = parseFloat(item.total_price)
                            return { ...item }
                        }) ?? []
                    this.advertisingRanking =
                        res.data?.AdvertisingRanking?.map(item => {
                            item.spend = parseFloat(item.spend)
                            return { ...item }
                        }) ?? []
                    this.storeSalesRanking =
                        res.data?.StoreSalesRanking?.map(item => {
                            item.total_price = parseFloat(item.total_price)
                            return { ...item }
                        }) ?? []
                    this.spuRanking = res.data?.SpuRanking
                    this.dataStatistics = res.data.DataStatistics
                    this.daysSalesFigures = []
                    res.data.daysSalesFigures?.forEach(item => {
                            this.daysSalesFigures = this.daysSalesFigures.concat([{
                                label: item.shopname,
                                type: '今天',
                                value: parseFloat(item.Today)
                            }, {
                                label: item.shopname,
                                type: '昨天',
                                value: parseFloat(item.Yesterday)
                            }])
                        }) ?? []
                })
                .finally(() => {
                    this.loaded = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.screen-bg-style {
    background: rgb(16, 25, 80) !important;
    color: #fff;
}

.screen-header {
    background: url('./assets/img/sreen_title_bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 1.5% 1%;
    position: relative;
}
.screen-title {
    margin: 0 auto;
    font-size: 26px;
    font-weight: bold;
    color: rgba(1, 196, 247, 1);
    line-height: 28px;
    text-align: center;
}
.screen-search {
    position: absolute;
    right: 1%;
    top: 45%;
}

.gradient-title {
    background: linear-gradient(0deg, rgba(4, 119, 213, 1) 0%, rgba(1, 217, 254, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 左右两列宽度比例为1:2 */
    gap: 8px; /* 列之间的间隔 */
    padding: 8px 0;
}

.left-column {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr; /* 左列有三行，高度1:1:1 */
    gap: 8px; /* 行之间的间隔 */
}
.right-column {
    display: grid;
    grid-template-rows: 2fr 3fr; /* 右侧列有两行，高度 2:3 */
    gap: 8px; /* 行之间的间隔 */
}

.el-table {
    background: transparent !important;
}
//<=768的设备
@media only screen and (max-width: 768px){ 
    .grid-container {
        overflow: auto;
        // grid-template-rows: auto auto;
    }
    .left-column {
        width: 80vw;
        
    }
    
    .right-column {
        width: 160vw;
    }
    .count-title {
        margin-bottom: 24px;
    }
 }
</style>
